<%@page import="edu.hcmus.sow.utils.SecurityUtil"%>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<meta id="${succes}">

<script type="text/javascript">
   Wicket.Event.add(window, "domready", function(event) {
      $('#addLinkApproval').click(function() {
         $('#hiddenAreaApproval').slideDown(250);
         $('#addLinkApproval').hide();
         $('#addLinkAltApproval').show();
         //$('#token-input-approver').focus();
         $("#approver").tokenInput("clear");
      });
      $('#cancelApproval,#downarrowApproval').click(function() {
         $('#hiddenAreaApproval').slideUp(250);
         $('#addLinkApproval').show();
         $('#addLinkAltApproval').hide();
      });
   });
   
   function addApprover(id){
      if($('#approver').val() == ''){
         alert('Approver must not blank!');
      } else {
         var approverID = $('#approver').val();
         //var suffix = $('#suffixFileName').text().trim();
         //var fileName = prefix + suffix;
         
         $.ajax({
            url : '${pageContext.request.contextPath}/ajax/file/' + id +'/addApprover',
            type : "POST",
            data: { approverID: approverID },
            dataType : "html",
            beforeSend : function() {
               $('#spinnerContainer').show();
            },
            complete : function() {
               $('#spinnerContainer').hide();
            },
            success : function(data) {
               if ($(data).first().attr("id") == "succes") {
                  $('#refreshArea').html(data);
                  //$('#label_file_name').text(prefix);
                  //hideRenameFile();
               } else {
                  //$('#span_error').text(data);
                  //$('#span_error').show();
               }
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
         });
         return false;
      }
   }
   
   function removeApprover(id){
      if(confirm('Are you sure you want to remove this approver?')){
         $.ajax({
            url : '${pageContext.request.contextPath}/ajax/file/' + id +'/removeApprover',
            type : "POST",
            dataType : "html",
            beforeSend : function() {
               //$('#spinnerContainer').show();
            },
            complete : function() {
               //$('#spinnerContainer').hide();
            },
            success : function(data) {
               if ($(data).first().attr("id") == "succes") {
                  $('#refreshArea').html(data);
               }
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
         });
         return false;
      }
   }
   
   function approveOrRejectFile(status){
      var reason = $('#approveComment').val();
      
      $.ajax({
         url : '${pageContext.request.contextPath}/ajax/file/' + '${file.id}' +'/approveOrRejectFile',
         type : "POST",
         data : { reason: reason, status: status },
         dataType : "html",
         beforeSend : function() {
            //$('#spinnerContainer').show();
         },
         complete : function() {
            //$('#spinnerContainer').hide();
            $('#dialogContainer').hide();
         },
         success : function(data) {
            if ($(data).first().attr("id") == "succes") {
               $('#approveComment').val('');
               $('#refreshArea').html(data);
            }
         },
         error : function() {
            alert("Failure args: " + arguments);
         }
      });
      return false;
   }
   
   function expandReason(){
      if($('#reasonExpander').is(":hidden")){
         $('#reasonExpander').slideDown();
         $('#reason').text('hide');
      } else {
         $('#reasonExpander').slideUp();
         $('#reason').text('more');
      }
   }
</script>
<script type="text/javascript">
   Wicket.Event.add(window, "domready", function(event) {
      $('#approveLink').click(function(){
         $('#titleDialog').html('<div class="approved">You approve this file.</div>');
         $('#submitLink span').first().text('Approve');
         $('#approveComment').val('');
         $('#dialogContainer').show(800);
         $('#submitLink').attr({onclick: 'approveOrRejectFile("A");'});
      });
      
      $('#rejectLink').click(function(){
         $('#titleDialog').html('<div class="rejected">You reject this file.</div>');
         $('#submitLink span').first().text('Reject');
         $('#approveComment').val('');
         $('#dialogContainer').show(800);
         $('#submitLink').attr({onclick: 'approveOrRejectFile("R");'});
      });
   });
</script>

<b>Document approver:</b>
<c:choose>
   <c:when test="${file.userByApprovedBy != null}">
      <div id="approverList" class="approversa">
         <div class="approvalList">
            <div class="${'A' eq file.approvalStatus ? 'approved' : 'R' eq file.approvalStatus ? 'rejected' : 'waiting'}">
               <div class="who">
                  <span>${'A' eq file.approvalStatus ? '<span style="color:#8DB528"><b>APPROVED</b></span> by' : 'R' eq file.approvalStatus ? '<span style="color:red"><b>REJECTED</b></span> by' : ''} </span><a title="${approver.firstName} ${approver.lastName} (${file.userByApprovedBy.username})" href="#"><span>${approver.firstName} ${approver.lastName}</span></a>
               </div>
               <c:choose>
                  <c:when test="${'W' eq file.approvalStatus}">
                     <span class="status">(To do)</span>
                     <a href="javascript:;" class="remove" id="removeApprover" onclick="removeApprover(${file.id});">remove</a>
                  </c:when>
                  <c:otherwise>
                     <a href="javascript:;" style="float: right;" class="remove" id="reason" onclick="expandReason();">more</a>
                  </c:otherwise>
               </c:choose>
            </div>
         </div>
      </div>
      <div id="reasonExpander" style="display: none">Reason: ${file.reason}</div>
      <c:set var="userID" value="<%=SecurityUtil.getCurrentLoggedinUserID() %>" />
      <c:if test="${file.userByApprovedBy.id == userID and 'W' eq file.approvalStatus}">
         <div class="toolbox">
            <ul>
               <li class="userDefinedBg"><a class="add_link approve" id="approveLink" href="javascript:;">Approve</a></li>
               <li class="userDefinedBg"><a class="add_link reject" id="rejectLink" href="javascript:;">Reject</a></li>
            </ul>
         </div>
      </c:if>
   </c:when>
   <c:otherwise>
      <div id="approverList" class="noApprovers">None</div>
      <c:if test="${isOwner}">
      <ul class="toolbox userDefinedColor">
         <li class="expandable userDefinedBg">
            <div class="add">
               <div style="display: block; height: 36px;" id="addLinkApproval">
                  <a href="javascript:;" class="add_link" style="position: relative;"><span class="add_title"> Add
                        Approver</span><img class="arrow" src="${pageContext.request.contextPath}/images/arrow_green_right.png"></a>
               </div>
               <div class="panel_open" style="position: relative; display: none;" id="addLinkAltApproval">
                  <span class="add_title">Add Approver</span> <span class="arrow" id="downarrowApproval"> <img
                     src="${pageContext.request.contextPath}/images/arrow_green_bottom.png">
                  </span>
               </div>
               <div style="display: none;" id="hiddenAreaApproval">
                  <div>
                     <form id="approvalForm" method="post" action="">
                        <div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
                           <input name="approvalForm_hf" id="approvalForm_hf" type="hidden">
                        </div>
                        <div class="approvSelect">
                           Please select who you want to approve this file. They will be notified by email
                           <div class="sel">
                              <input type="text" id="approver" name="approver" />
                              <script type="text/javascript">
                                 $(document).ready(function() {
                                    $("#approver").tokenInput("${pageContext.request.contextPath}/ajax/user/search", {
                                        theme: "facebook",
                                        queryParam : "approver",
                                        tokenLimit : 1,
                                        preventDuplicates: true,
                                        resultsFormatter: function(item) { return "<li>" + "<div><img src='${pageContext.request.contextPath}/images/default_profile.png' title='" + item.name + "' height='40px' width='40px' />" + "<div style='display: inline-block; vertical-align: top; padding: 0px 0px 0px 5px'><span style='display:block'>" + item.name + "</span><span>" + item.username + "</span></div></div></li>" },
                                        tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" }
                                    });
                                 });
                              </script>
                           </div>
                        </div>
                        <div class="panel_btn">
                           <div class="cancel">
                              <a class="action" href="javascript:;" id="cancelApproval">cancel</a>
                           </div>
                           <a class="gcSubmit small" id="submitLinkApproval" href="javascript:;" onclick="addApprover(${file.id});">
                              Add <span class="left"></span><span class="right"></span><span style="display: none"
                              id="spinnerContainer">&nbsp;<img
                                 src="${pageContext.request.contextPath}/images/spinnerflat.gif"></span>
                           </a>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </li>
      </ul>
   </c:if>
   </c:otherwise>
</c:choose>